<template>
  <div>
    <headCommod/>
    <div ref="userinfo" class="container userinfo cl">
      <div class="left to-right">
        <asideCommod/>
      </div>
      <div class="right">
        <breadcrumbCommod class="to-bottom" title="付款开票"/>
        <div class="main bg-white to-left">
          <div class="info">
            <div class="search">
              <el-form class="cl" style="margin-bottom: 22px; text-align: right;" ref="form" :model="form"
                       :inline="true"
                       label-width="80px">
                <el-button size="mini" style="margin-top: 6px;" type="success" @click="handleAdd">新增</el-button>
                <el-button size="mini" style="margin-top: 6px;" type="success">导入</el-button>
                <el-button size="mini" style="margin-top: 6px;" type="success">导入模板下载</el-button>
              </el-form>

              <el-dialog :title="addForm.id?'编辑':'新增'" :visible.sync="dialogaddFormVisible" width="700px">
                <el-form ref="addForm" :model="addForm" :rules="rules" @submit.native.prevent>
                  <el-form-item label="账户名" :label-width="formLabelWidth" prop="account">
                    <el-input autocomplete="off" placeholder="请输入账户名" v-model="addForm.account"></el-input>
                  </el-form-item>
                  <el-form-item label="账户" :label-width="formLabelWidth" prop="accountName">
                    <el-input autocomplete="off" placeholder="请输入账名" v-model="addForm.accountName"></el-input>
                  </el-form-item>
                  <el-form-item label="账户类型" :label-width="formLabelWidth" prop="accountType">
                    <el-radio-group v-model="addForm.accountType" fill='#44a148'>
                      <el-radio label="私账" value="0"></el-radio>
                      <el-radio label="公账" value="1"></el-radio>
                    </el-radio-group>

                  </el-form-item>
                  <el-form-item label="开户行" :label-width="formLabelWidth" prop="bank">
                    <el-input autocomplete="off" placeholder="请输入开户行" v-model="addForm.bank"></el-input>
                  </el-form-item>
                  <el-form-item label="发票类型" :label-width="formLabelWidth" prop="invoiceType">
                    <el-select v-model="addForm.invoiceType" placeholder="请选择发票类型">
                      <el-option label="增值税发票" value="0"></el-option>
                      <el-option label="普通发票" value="1"></el-option>
                    </el-select>
                    <!--                    <el-input autocomplete="off" placeholder="请输入开户行" v-model="addForm.invoiceType"></el-input>-->
                  </el-form-item>
                  <el-form-item label="发票抬头" :label-width="formLabelWidth" prop="invTt">
                    <el-input autocomplete="off" placeholder="请输入发票抬头" v-model="addForm.invTt"></el-input>
                  </el-form-item>
                  <el-form-item label="税号" :label-width="formLabelWidth" prop="dutyNo">
                    <el-input autocomplete="off" placeholder="请输入税号" v-model="addForm.dutyNo"></el-input>
                  </el-form-item>
                  <el-form-item label="地址信息" :label-width="formLabelWidth" prop="addressInfo">
                    <el-input autocomplete="off" placeholder="请输入地址信息" v-model="addForm.addressInfo"></el-input>
                  </el-form-item>
                  <el-form-item style="text-align: center;">
                    <el-button type="primary" @click="onSubmit('addForm')">立即创建</el-button>
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>


              <div class="list cl">
                <el-table
                  :data="tableData"
                  :border="false"
                  style="width: 100%;"
                  :pagination="ipagination"
                  :header-cell-style="{'text-align':'center','color': '#397e48','font-size': '15px','line-height': '30px'}"
                  :cell-style="{ textAlign: 'center' }"
                >
                  <el-table-column
                    prop="date"
                    label="操作"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="account"
                    label="账户名"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="accountName"
                    label="账号">
                  </el-table-column>
                  <el-table-column
                    prop="bank"
                    label="开户行">
                  </el-table-column>

                  <el-table-column
                    prop="invoiceType"
                    label="发票类型"
                    :formatter="formatInvoiceType"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="invTt"
                    label="发票抬头">
                  </el-table-column>
                  <el-table-column
                    prop="dutyNo"
                    label="税号">
                  </el-table-column>
                  <el-table-column
                    prop="addressInfo"
                    label="地址信息">
                  </el-table-column>
                </el-table>
              </div>
              <div class="pages">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="ipagination.current"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="ipagination.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="ipagination.total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import headCommod from '../components/Head'
  import asideCommod from '../components/Aside'
  import breadcrumbCommod from '../components/Breadcrumb'
  import {list, add, edit} from '@/api/paymentInvoive'

  export default {
    name: 'paymentInvoice',
    data () {
      return {
        ipagination: {
          current: 1,
          pageSize: 10,
          // pageSizeOptions: ['10', '20', '30','40'],
          // showTotal: (total, range) => {
          //   return range[0] + '-' + range[1] + ' 共' + total + '条'
          // },
          // showQuickJumper: true,
          // showSizeChanger: true,
          total: 0
        },
        currentPage: 1,
        form: {},
        tableData: [],
        formLabelWidth: '100px',
        dialogaddFormVisible: false,
        addForm: {
          id: ''
        },
        rules: {
          account: [
            {required: true, message: '请输入账户名', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          accountName: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          bank: [
            {required: true, message: '请输入开户行', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          invoiceType: [
            {required: true, message: '请输入发票类型', trigger: 'blur'},
          ],
          invTt: [
            {required: true, message: '请输入发票抬头', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          dutyNo: [
            {required: true, message: '请输入税号', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          addressInfo: [
            {required: true, message: '请输入地址信息', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ]
        },
      }
    },
    created () {
      this.getList()
    },
    mounted () {

    },
    components: {
      headCommod,
      asideCommod,
      breadcrumbCommod
    },
    methods: {
      formatInvoiceType (row, colum) {
        //0增值税发票  1普通发票
        switch (row.invoiceType) {
          case '0':
            return '增值税发票'
          case '1':
            return '普通发票'
        }
      },
      getList () {
        console.log('1')
        list().then(res => {
            if (res.success) {
              this.tableData = res.result.records
              this.ipagination.total = res.result.total
              this.ipagination.pageSize = res.result.size
              this.ipagination.current = res.result.current
            } else {
            }
          }
        )
      },
      onSubmit (form) {

        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.addForm.id != null && this.addForm.id.length > 0) {
            } else {
              add(this.addForm).then(res => {
                if (res.success) {
                  this.$message({
                    type: 'success',
                    message: '表单数据为空',
                  })
                } else {

                  this.$message({
                    type: 'success',
                    message: res.message,
                  })

                  console.log(res)
                }
              }).catch(err => {

              })
            }
          } else {
            return false
          }
        })
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
      },
      handleAdd () {
        this.dialogaddFormVisible = true
      }
    }
  }
</script>

<style scoped>



  .el-button--primary {
    color: #FFF;
    background-color: #44a148;
    border-color: #44a148;
  }

  .el-input__inner {
    border-color: #606266 !important;
  }


  .info {
    background: #fff;
    border-radius: 10px;
    /*margin: 30px 0;*/
    width: calc(100% - 40px);
    padding: 20px 10px;
  }

  .tx {
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    margin: 20px auto;
  }

  .tx img {
    position: relative;
    top: 10px;
    opacity: 0.5;
  }

  .explain {
    color: #999;
    font-size: 11px;
    margin: 10px 0;
  }

  .list {
    background: #f1f2f6;
    padding: 10px 0;
  }

  .list-item {
    background: #fff;
    margin: 15px 0;
    border-radius: 10px;
  }

  .list-item li {
    float: left;
    list-style: none;
    border-right: 1px solid #508c5f;
    text-align: center;
    width: 130px;
    line-height: 25px;
  }

  .list-item li p.min {
    font-size: 12px;
    color: #999;
  }

  .list-item li:last-child {
    border: none;
  }

  .pages {
    margin-top: 20px;
    text-align: center;
  }

  .main {
    margin-top: 10px;
  }
</style>

<style>
  .w .el-form-item__content {
    width: 300px;
  }

  .m .el-form-item__content {
    width: 100px;
  }
</style>
